Graphical User Interface Programming in Introductory Computer Science

Modern computing systems exploit graphical user interfaces for interaction with users. As a result, introductory computer science courses must begin to teach the principles underlying such interfaces. This paper presents an approach to graphical user interface implementation that is simple enough for beginning students to understand, yet rich enough to demonstrate many important concepts and trade-offs in computer science. Introduction A major problem confronting teachers of introductory computer science courses is that, while most computational environments that students are exposed to involve graphical user interfaces (GUIs), the I/O programming paradigm that they are typically introduced to is character based. The irony is that students are using and enjoying the flexibility of GUIs but from a programming point of view they could just as well be using teletype machines. It is clearly no longer acceptable to give students programming exercises where graphical information is output as lines of ASCII characters. Further, students restricted to characterbased input quickly become bound up in the intricacies of awkward command languages, when a GUI interface would be more natural. At the same time, there are valid reasons for hesitating to teach GUI programming at the introductory level. Foremost is the additional complexity involved in doing event-loop programming, typically considered too difficult for the novice programmer. While a strong case can be made for introducing GUI programming techniques into introductory computer science courses, this is not being done. The only introductory Computer Science text (of which we are aware) that integrates bit-mapped graphics is Roberts (1995). By including a graphics.h file in the C code, the programmer has access to a set of basic functions for producing bit-mapped output, e.g., MovePen, DrawLine, DrawArc. We are not aware of any introductory text (or course) that attempts to introduce both GUI input and output. This paper will describe a simplified GUI interface which is implemented using a library of C macros and which provides a display window that outputs bit-mapped graphics and inputs mouse actions. The input mouse actions can be used in a drawing framework and for the control of some (user specified) number of input buttons. The library of macros supports the MOTIF GUI interface standard, but could easily be converted to support other GUI standards. The macro calls and conventions will be described in the context of an implementation of Conway’s Game of Life (Conway, 1970), a programming exercise found in many introductory texts. The macro library has been used in teaching the second computer science course at Rensselaer. The positive reactions of students have indicated to us that introducing this library to students in the course Introduction to Computer Science (CS1) would enhance this course as well. This paper will describe how this material could be introduced in CS1. The GUI interface for the Game of Life program will be described in the first section, in order to provide a concrete example of the various capabilities of the simplified GUI library. The next section describes the life main() function that sets up the buttons and associated callback functions. The callback functions (and macro conventions for calling them) that are at the heart of the programming interface support are presented in the next section. The last section gives an example of a simple paint program that can also be creating using the GUI macro library. In all of these sections we consider how this material should be presented to CS1 students. The Game of Life and its GUI Interface In general, the GUI interface (as supported by the macro library) provides two regions of interaction with the program: a vertical strip of user definable buttons on the left and a larger display/drawing region to the right. For example, when the Game of Life program is invoked a window like that shown in Figure 1 appears on the screen. In the Game of Life, the graphical display/ drawing region may initially be all black, indicating that there are no live cells. The user can then drag the mouse in this region in order to draw in the cells (in white) that are considered to be alive. The Game of Life transition can now be applied to the initial array of live cells. Basically, the Game of Life transition embodies simple rules of population support and crowding. For example, live cells stay alive if they are “sustained” by “just the right” (2 or 3) immediate neighboring cells that are alive, but if a live cell is crowded (4 or more neighbors) or too isolated (0 or 1 neighbors) then it dies. Similarly, cells can come to life if they have just the right support in their neighborhoods. What is interesting about this simple “game” is that a variety of stable configurations of “cooperating” cells tend to emerge, when successive transitions are applied to initial random configurations.